<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-提交订单</title>
	<link rel="stylesheet" type="text/css" href="/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/css/main.css">
	<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
	<div class="header_con">
		<div th:replace="header::top1"></div>
	</div>

	<div th:replace="search::top2"></div>
	
	<h3 class="common_title">确认收货地址</h3>

	<div id="shippingList" class="common_list_con clearfix">
		<!--<dl>
			<dt>寄送到：</dt>
			<dd><input type="radio" name="" checked="">北京市 海淀区 东北旺西路8号中关村软件园 （李思 收） 182****7528</dd>
		</dl>
		<a href="/page/userSite" class="edit_site">编辑收货地址</a>-->

	</div>
	
	<h3 class="common_title">支付方式</h3>	
	<div class="common_list_con clearfix">
		<div class="pay_style_con clearfix">
			<input type="radio"  name="paymentType"  value="0" checked="">
			<label class="cash">货到付款</label>
			<input type="radio"  name="paymentType"  value="1">
			<label class="weixin">微信支付</label>
			<input type="radio"  name="paymentType"  value="2">
			<label class="zhifubao"></label>
			<input type="radio"  name="paymentType"  value="3">
			<label class="bank">银行卡支付</label>
		</div>
	</div>

	<h3 class="common_title">商品列表</h3>
	<div id="cart-list" class="common_list_con clearfix">
		<!--<ul class="goods_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品单位</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>
		</ul>
		<ul class="goods_list_td clearfix">
			<li class="col01">1</li>
			<li class="col02"><img src="/images/goods/goods012.jpg"></li>
			<li class="col03">奇异果</li>
			<li class="col04">500g</li>
			<li class="col05">25.80元</li>
			<li class="col06">1</li>
			<li class="col07">25.80元</li>
		</ul>
		<ul class="goods_list_td clearfix">
			<li class="col01">2</li>
			<li class="col02"><img src="/images/goods/goods003.jpg"></li>
			<li class="col03">大兴大棚草莓</li>
			<li class="col04">500g</li>
			<li class="col05">16.80元</li>
			<li class="col06">1</li>
			<li class="col07">16.80元</li>
		</ul>-->
	</div>


	<h3 class="common_title">总金额结算</h3>

	<div id="totalPrice" class="common_list_con clearfix">
		<!--<div class="settle_con">
			<div class="total_goods_count">共<em>2</em>件商品，总金额<b>42.60元</b></div>
			<div class="transit">运费：<b>10元</b></div>
			<div class="total_pay">实付款：<b>52.60元</b></div>
		</div>-->
	</div>

	<div class="order_submit clearfix">
		<a href="javascript:;" id="order_btn" class="submit-cart">提交订单</a>
	</div>	

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>

	<!--<div class="popup_con">
		<div class="popup">
			<p>订单提交成功！</p>
		</div>
		
		<div class="mask"></div>
	</div>-->

	<script src="/jquery-2.1.4.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/mylayer.js"></script>

	<script type="text/javascript">

		layui.use([], function(){
			//确认收货地址
			$.post(
				'/shipping/list',
				function (result) {
					console.log(result);
					if (result.code == 0) {
						$(result.data).each(function () {
							var html = '';
							html+='<dl>'
							if (this.status == 1){
								html+= '   <dt><input id="'+this.id+'" type="radio" class="check ischecked" name="status" checked="checked">寄送到：</dt>'
							}else{
								html+= '    <dt><input type="radio" class="check" name="status">寄送到：</dt>'
							}
							html+='	<dd>'+this.receiverCity+' | '+this.receiverDistrict+' | '+this.receiverAddress+' | '+this.receiverName+' | '+this.receiverPhone+' </dd>'
							html+='</dl>'
							html+='<a href="/page/userSite" class="edit_site">编辑收货地址</a>'

							$('#shippingList').prepend(html); /*prepend：向前追加、append：向后追加*/
						})
					}
				},
				'json'
			);
			//普通勾选
			//事件委托机制
			// .cart_list_td操作的是子类
			$('#shippingList').on('click', '.check', function (){
				var cla=$(this).attr('class');
				var checked;
				if(cla!='check ischecked'){
					$(this).attr('class','check ischecked');
					checked = 1;
				}else{
					$(this).attr('class','check');
					checked = 0;
				}
				var id = $(this).parents('.addressId').attr('id');
				console.log('shippingId: ' + id);
				$.post(
					'/shipping/updateStatus',
					{'id': id, 'status': checked},
					function (result) {
						if (result.code == 0) {
							mylayer.okMsg(result.msg);
						}
					},
					'json'
				);
			});

			//显示购物车内容
			$.post(
				'/cart/list',
				{'checked': 1},
				function (result) {
					console.log(result);
					if (result.code == 0){
						var html='';
						html +='<ul class="goods_list_th clearfix">'
						html +='	<li class="col01">商品名称</li>'
						html +='	<li class="col02">商品单位</li>'
						html +='	<li class="col03">商品价格</li>'
						html +='	<li class="col04">数量</li>'
						html +='	<li class="col05">小计</li>'
						html +='</ul>'
						var count = 1;
						var totalPrice = 0.0;
						$(result.data).each(function () {
							html +='<ul class="goods_list_td clearfix">'
							html +='	<li class="col01">'+(count++)+'</li>'
							html +='	<li class="col02"><img src="/pic/'+this.productMainImage+'"></li>'
							html +='	<li class="col03">'+this.productName+'</li>'
							html +='	<li class="col04">'+this.productSubtitle+'</li>'
							html +='	<li class="col05">'+this.productPrice+'元</li>'
							html +='	<li class="col06">'+this.quantity+'</li>'
							html +='	<li class="col07">'+(this.quantity*this.productPrice)+'元</li>'
							html +='</ul>'
							totalPrice += parseFloat(this.quantity*this.productPrice);
						});
						$('#cart-list').append(html);
						html = '';
						html += '<div class="settle_con">';
						html += '    <div class="total_goods_count">共<em>'+(count-1)+'</em>件商品，总金额<b>'+totalPrice+'</b></div>';
						html += '    <div class="transit">运费：<b>10元</b></div>';
						html += '    <div class="total_pay">实付款：<b>'+(totalPrice+10)+'元</b></div>';
						html += '</div>';
						$('#totalPrice').append(html);
					}
				},
				'json'
			);

			$('.submit-cart').click(function () {
				$.post(
					'/order/add',
					{'shippingId':$(".check[checked='checked']").attr('id'),'paymentType':$("input[name='paymentType']:checked").val()},
					function (result) {
						console.log(result);
						if (result.code == 0){
							mylayer.okMsg(result.msg);
						}
					},
					'json'
				);
			});


		});


	</script>
</body>
</html>